{extend name="public/base" /}
{block name="css"}
<style>

  .container-fluid {

  }

  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .banner {
    width: 100%;
  }

  .order-title {
    font-size: 20px;
    color: #ffffff;
    font-weight: bold;
    margin-top: -5px;
    margin-bottom: 0;
  }

  .order-input {
    width: 160px;
    height: 34px;
    color: #fff;
    border: 1px solid #fff;
    background: transparent;
    border-radius: 20px;
    padding-left: 10px;
    margin-top: 13px;
    margin-left: 8px;
  }

  .order-input:nth-child(1) {
    margin-left: 0;
  }

  .order-submit {
    width: 140px;
    background: #DAAA84;
    height: 35px;
    color: #694428;
    border: none;
    padding: 0 18px;
    margin-top: 13px;
    margin-left: 28px;
    border-radius: 20px;
  }

  .order-submit:hover {
    opacity: .9;
  }

  input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #ccc !important;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <!-- banner -->
  <img alt="" class="banner" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202201/pc/mj_pc_01.jpg">
  <!-- banner end -->
  <div class="d-flex align-items-center justify-content-center" style="position: relative;background: url('https://res.bestyoujia.com/web/ZMYJ/activities/act202201/pc/mj_pc_02.jpg'); background-size: cover; padding: 0 0 750px">
    <div class="wow animate__animated animate__fadeInUp" style="margin-top: -50px;">
      <div class="mx-auto" style="padding: 20px 27px 20px 20px;width: 700px;
height: 125px;
border: 2px solid #fff;
border-radius: 10px;margin: 0 auto;">
        <div>
          <p class="order-title">免费获取 全案软装整配报价</p>
          <div style="display: flex">
            <input class="order-input" id="act-customer" placeholder="您的称呼"/>
            <input class="order-input" id="act-mobile" placeholder="您的联系方式"/>
            <input class="order-input" id="act-building" placeholder="您的小区名称"/>
            <button class="order-submit">立即预约报名</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row" style="display: flex; flex-direction: column; align-items: center; ">
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202201/pc/mj_pc_03.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202201/pc/mj_pc_04.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202201/pc/mj_pc_05.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" style="width: 100vw" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202201/pc/mj_pc_06.jpg">
    </div>
  </div>
</section>
{/block}
{block name="js"}
<script>
  $('.order-submit').on('click', function () {

    const customer = $('#act-name').val() || '';
    const building = $('#act-building').val() || '';
    const mobile = $('#act-mobile').val();

    const mobileStatus = validMobile(mobile);

    switch (mobileStatus) {
      case 1:
        layer.msg('预约中，请稍候...', {
          icon: 16
          ,shade: 0.01
        });

        const data = {
          mobile,
          customer,
          building,
        };

        doAppointment(
                data,
                function(res) {
                  console.log('onAppointmentSuccess', res);
                  const { data = '' } = res;
                  if (data) {
                    buryingPoint('APPOINTMENT', data);
                    layer.closeAll();
                    showToast('预约成功', 'success');
                    $('#act-name').val('');
                    $('#act-mobile').val('');
                    $('#act-building').val('');
                  }
                },
                function(err) {
                  console.log('onAppointmentError', err);
                  layer.closeAll();
                  showToast('抱歉，预约失败～', 'fail');
                  $('#act-name').val('');
                  $('#act-mobile').val('');
                  $('#act-building').val('');
                }
        );
        break;
      case 2:
        showToast('手机号码格式不正确', 'fail');
        break;
      case 3:
        showToast('联系方式不能为空', 'fail');
        break;
    }
  });
</script>
{/block}